<template>

    <div>
      <a-modal
       v-for="i in approve" :key="i.id"
        v-model="visible1"
      title="Title"

      @ok="handleOk1"
      @cancel="handleCancel"
    >
    <template slot="footer">
        <a-button key="back" @click="handleCancel">
          cancle
        </a-button>
        <a-button key="OK" type="primary" :loading="loading" @click="requestAddFlowConf(i.id)">
          OK
        </a-button>
      </template>
      <div>
        <label>工单名称：{{name}}</label>
      </div>

      <div>
        <label>审批序号：</label>
        <a-input-number id="inputNumber" v-model="sequence" :min="1" :max="100" @change="onChange" />
      </div>

      <div>
        <label>审批类型：</label>
        <a-select default-value="1" style="width: 200px" @change="handleChangeApproveType" v-model="approve_type_id">
          <a-select-option v-for="i in approveTypeList" :key="i.id">
            {{ i.name }}
          </a-select-option>
        </a-select>
      </div>

      <div>
        <label>审批人员：</label>
        <a-select
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          v-model="approve_id"
        >
          <a-select-option v-for="i in approveLists" :value="i.id" :key="i.id">
            <span v-show="flag==1">{{ i.username }}</span>
            <span v-show="flag==2">{{ i.name }}</span>
          </a-select-option>
        </a-select>
      </div>
    </a-modal>


      <table>
        <tr>
          <th>ID</th>
          <th>工单名称</th>
          <th>审批序号</th>
          <th>审批</th>
          <th>操作</th>
        </tr>
        <tr v-for="i in approve" :key="i.id">
          <td>{{i.id}}</td>
          <td>{{i.flowconf}}</td>
          <td>{{i.sequence}}</td>
          <td>
            <a-button>{{i.approve_user.approve}}</a-button>
            <a-button>{{i.approve_user.approve_type}}</a-button>
          </td>
          <td>
            <a-button class="update" @click="showModal1(i.id)">编辑</a-button>
            <a-button class="del" @click="del(i.id)">删除</a-button>
          </td>
        </tr>
      </table>
    </div>
</template>

<script>
import axios from 'axios'
import { getUserList, getRoleList } from '@/http/api.js'
import { getFlowConfList, addFlowConf, updateFlowConf, deleteFlowConf } from '@/http/api.js'

export default {
    data() {
        return {
          approve:[],
          id:this.$route.query.id,
          name:this.$route.query.name,
          flowconf:'',
          sequence:'',
          approve_type_id:'',
          approve_id:'',
          flag:1,
          visible:false,
          visible1:false,
          approveTypeList:[
            {
              "id": 1,
              "name": "指定人员审批",
            },
            {
              "id": 2,
              "name": "角色组审批",
            }
          ],
          approveLists:[],
          loading: false,
          editData: {       // 添加和修改用户时，弹出框中进行双向绑定的数据
            flowconf_id: '',
            flowconf: '',
            sequence: 1,
            approve_id:'',
            approve_type_id:''
          },
        }
    },
    methods: {
      del(id){
        axios.delete('http://127.0.0.1:8000/work/approve/?id='+id).then(res=>{
          console.log(res.data)
          alert(res.data)
        })
      },
      showModal1(id){
      this.visible1 = true;
      },
      handleOk1(id) {
       axios.put('http://127.0.0.1:8000/work/approve/',{'flowconf_id':this.id,'sequence':this.sequence,'approve_type_id':this.approve_type_id,'approve_id':this.approve_id}).then(res=>{
        console.log(res.data)
        console.log(id)
        alert('修改成功')
      })
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
     // 弹出框点击取消时调用此函数
    handleCancel(e) {
      this.visible = false;
    },


    onChange(value) {
      console.log('changed', value);
      // this.editData.approve_type_id = value
    },

    handleChangeApproveType(value){
      // console.log("handleChangeApproveType")
      // console.log(`selected ${value}`);
      this.editData.approve_type_id = value
      if(value=='1'){
        getUserList().then(resp =>{
          this.flag=1
          console.log(resp)
          this.approveLists = resp
        }).catch(err =>{
          alert(err)
        })
      }else {
        getRoleList().then(resp =>{
          this.flag=2
          this.approveLists = resp
          console.log(resp)
        }).catch(err =>{
          alert(err)
        })
      }

    },
        // 2.2 添加获取修改用户时进行后端请求
    requestAddFlowConf(id){
      const userId = this.editData.id
      if(userId){
        console.log(this.editData,'修改数据')
        updateFlowConf(this.editData).then(resp => {
          this.initList()
        }).catch(err=>{
          console.log(err)
          alert('更新用户失败')
        })
      }else {
        addFlowConf(this.editData).then(resp => {
          this.initList()
        }).catch(err=>{
          console.log(err)
          alert('创建用户失败')
        })
      }
    },


    // 一.初始化时显示所有用户
    initList(){
      getFlowConfList(this.filterData).then(resp => {
        this.tableData = resp.results
        this.totalCount = resp.count
      }).catch(err=>{
        console.log(err)
        alert('获取用户失败')
      })
    },

    // 二.修改或添加用户时显示弹出框
    // 2.2 添加获取修改用户时进行后端请求
    requestAddUser(){
      const userId = this.editData.id
      if(userId){
        console.log(this.editData,'修改数据')
        updateUser(this.editData).then(resp => {
          this.initUserList()
        }).catch(err=>{
          console.log(err)
          alert('更新用户失败')
        })
      }else {
        addUser(this.editData).then(resp => {
          this.initUserList()
        }).catch(err=>{
          console.log(err)
          alert('创建用户失败')
        })
      }
    },

    // 三.删除指定用户
    requestDeleteFlowConf(){
      deleteFlowConf(this.editData).then(resp => {
        this.initList()
      }).catch(err=>{
        console.log(err)
        alert('更新用户失败')
      })
    },




    // 带搜索的select中绑定方法
    handleChange(value) {
      this.editData.approve_id = value
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    },
    created() {
      axios.get('http://127.0.0.1:8000/work/approve/').then(res=>{
        console.log(res.data)
      this.approve=res.data
    })

    this.initList()
    }
}
</script>

<style scoped>
table{
  width: 900px;
  height: 200px;
  /* border: 1px solid darkgrey */
}
th{
  background: rgb(223, 219, 219);
  border: 1px solid darkgrey
}
tr,th,td{
  border: 1px solid darkgrey;
  height: 70px;
}
.update{
  width: 65px;
  height: 30px;
  background: rgb(224, 77, 77);
  color: aliceblue;
  margin-bottom: 8px;

}
.del{
  width: 65px;
  height: 30px;
  background: rgb(74, 153, 226);
  color: aliceblue;
  margin-bottom: 8px;
}
</style>
